<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./public/JQuery/jquery.3.5.0.js"></script>
    <script src="./public/JQuery/jquery.validate.js"></script>
    <script src="./public/JQuery/jquery.validate.messages_zh.js"></script>
    <script src="./ajax.js"></script>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/cart.css">
    <link rel="stylesheet" href="./css/PCH.css">

    <style>
        .myindent>table{
            width: 100%;
        }
        #oldpassword,#newpassword,#newpassword2{
            border: 1px solid;
            width: 100px;
            text-align: left;
        }
    </style>
</head>
<body>
    <div id="personalCenterHeader">
        <div class="PCH-header">
            <h1><a href="./index.html"><img src="./images/login/logo.jpg" alt=""></a></h1>
        </div>
    </div>
    <div id="personalCenterContent">
        <div class="PCC-Box">
            <ul class="list">
                <li style="background-color: #d04;">账号信息</li>
                <li>我的订单</li>
                <li>账号安全</li>
            </ul>
            <div class="information">
                <div class="accountInfo show">
                    <p><span>我的账号:</span><span class="un"></span></p>
                    <p><span>收货地址:</span></p>
                    <p><span>我的手机号:</span></p>
                </div>
                <div class="myindent">
                    <table>
                        <thead>
                            <tr>
                                <th width="40">选中</th>
                                <th width="100">图片</th>
                                <th>名称</th>
                                <th width="70">数量</th>
                                <th width="70">价格</th>
                                <th width="80">合计</th>
                                <th width="60">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <div class="accountSafe">
                    <form>
                        输入旧密码：<input type="text" id="oldpassword" required=true><br>
                        输入新密码：<input type="text" required=true name="b" digits=true id="newpassword"><br>
                        重复新密码：<input type="text" required=true name="d" equalTo="#newpassword" id="newpassword2"><br>
                        <div class="submit">确定</div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="footer"></div>
</body>
<script>$("#footer").load("http://localhost:3000/public/public.html .footer")</script>
<script>
    var ali = document.querySelectorAll(".list>li");
    var acont = document.querySelectorAll(".information>div");
    for(var i=0;i<ali.length;i++){
        ali[i].a = i;
    }
    var prev = 0;
    for(var i=0;i<ali.length;i++){
        ali[i].onclick = function(){
            ali[prev].style.background = "none";
            acont[prev].style.display = "none";
            this.style.background = "#d04";
            acont[this.a].style.display = "block";         
            prev = this.a;
        }
    }
</script>
<script>
    $("form").validate();
    const oldpassword=document.querySelector("#oldpassword");
    const newpassword=document.querySelector("#newpassword");
    const newpassword2=document.querySelector("#newpassword2");
    $(".submit").on("click",function(){
        if(newpassword2.value!==newpassword.value){
            alert("重复输入密码不一致！请再次输入")
            newpassword2.value="";
        }
        else{
            alert("ok");
            ajax("http://localhost:3000/api",function(res){
                console.log(res);
            },{type:"resetpassword","username":localStorage.getItem("username"),oldpassword:oldpassword.value,newpassword:newpassword.value})
        }
    })


//     function ajax(url, callback, data){
//     let str = "";
//     for(let i in data){
//         str += `${i}=${data[i]}&`
//     }
//     url += "?" + str;
//     const xhr = new XMLHttpRequest();
//     xhr.open("get",url)
//     xhr.onload = function(){
//         if(xhr.status === 200){
//             callback(xhr.responseText)
//         }
//     }
//     xhr.send();
// }
</script>
<script>
        if(localStorage.getItem("isLogin") !== "ok"){
        alert("未登录状态，不允许打开购物车，请先登录")
        location.href = "./login.html"}
        else if(localStorage.removeItem("username"))
</script>
<script src="./JSlibrary/cart.js"></script>
<script>
        const oun = document.querySelector(".un");
        oun.innerHTML=localStorage.getItem("username");
</script>
</html>